<!-- 调试页面 -->
<div id="debug" class="page-content">
    <div class="page-header">
        <h1 class="page-title">调试工具</h1>
        <p class="page-description">用于调试视频检测功能的问题</p>
    </div>

    <div class="dashboard-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-bug"></i> 视频检测调试
            </div>
        </div>
        
        <div class="debug-controls">
            <button id="checkStatusBtn" class="btn btn-info">
                <i class="fas fa-info-circle"></i> 检查状态
            </button>
            <button id="forceStartBtn" class="btn btn-success">
                <i class="fas fa-play"></i> 强制启动
            </button>
            <button id="forceStopBtn" class="btn btn-danger">
                <i class="fas fa-stop"></i> 强制停止
            </button>
            <button id="testCaptureBtn" class="btn btn-primary">
                <i class="fas fa-camera"></i> 测试截图
            </button>
            <button id="testCaptureFunctionBtn" class="btn btn-warning">
                <i class="fas fa-vial"></i> 深度测试
            </button>
            <button id="checkVideoElementsBtn" class="btn btn-info">
                <i class="fas fa-eye"></i> 检查视频元素
            </button>
            <button id="forceResetBtn" class="btn btn-danger">
                <i class="fas fa-exclamation-triangle"></i> 强制重置
            </button>
            <button id="forceCleanupBtn" class="btn btn-warning">
                <i class="fas fa-broom"></i> 强制清理
            </button>
            <button id="fixDuplicateBtn" class="btn btn-success">
                <i class="fas fa-magic"></i> 修复重复显示
            </button>
        </div>
        
        <div class="debug-info">
            <h3>调试信息</h3>
            <div id="debugOutput" class="debug-output">
                <p>点击"检查状态"按钮查看当前状态</p>
            </div>
        </div>
    </div>
</div>

<script>
// 调试功能
$(document).ready(function() {
    // 检查状态按钮
    $('#checkStatusBtn').click(function() {
        if (typeof checkVideoStatus === 'function') {
            checkVideoStatus();
            $('#debugOutput').html('<p>状态检查完成，请查看浏览器控制台</p>');
        } else {
            $('#debugOutput').html('<p>checkVideoStatus函数未定义</p>');
        }
    });
    
    // 强制启动按钮
    $('#forceStartBtn').click(function() {
        if (typeof isVideoRunning !== 'undefined') {
            isVideoRunning = true;
            $('#debugOutput').html('<p>强制设置 isVideoRunning = true</p>');
        } else {
            $('#debugOutput').html('<p>isVideoRunning变量未定义</p>');
        }
    });
    
    // 强制停止按钮
    $('#forceStopBtn').click(function() {
        if (typeof isVideoRunning !== 'undefined') {
            isVideoRunning = false;
            $('#debugOutput').html('<p>强制设置 isVideoRunning = false</p>');
        } else {
            $('#debugOutput').html('<p>isVideoRunning变量未定义</p>');
        }
    });
    
    // 测试截图按钮
    $('#testCaptureBtn').click(function() {
        if (typeof captureFrame === 'function') {
            captureFrame();
            $('#debugOutput').html('<p>截图功能已调用，请查看控制台输出</p>');
        } else {
            $('#debugOutput').html('<p>captureFrame函数未定义</p>');
        }
    });
    
    // 深度测试按钮
    $('#testCaptureFunctionBtn').click(function() {
        if (typeof testCaptureFunction === 'function') {
            testCaptureFunction();
            $('#debugOutput').html('<p>深度测试已执行，请查看控制台输出</p>');
        } else {
            $('#debugOutput').html('<p>testCaptureFunction函数未定义</p>');
        }
    });
    
    // 检查视频元素按钮
    $('#checkVideoElementsBtn').click(function() {
        const videos = $('video');
        const canvases = $('canvas');
        const videoElements = $('[id*="video"]');
        const visibleVideos = $('video:visible');
        const visibleCanvases = $('canvas:visible');
        const placeholderVisible = $('#videoPlaceholder').is(':visible');
        
        let output = '<h4>视频元素检查结果:</h4>';
        output += `<p>找到 ${videos.length} 个 video 元素</p>`;
        output += `<p>找到 ${canvases.length} 个 canvas 元素</p>`;
        output += `<p>找到 ${videoElements.length} 个包含"video"的ID元素</p>`;
        output += `<hr>`;
        output += `<h5>显示状态:</h5>`;
        output += `<p>可见视频元素数量: <strong>${visibleVideos.length}</strong></p>`;
        output += `<p>可见Canvas元素数量: <strong>${visibleCanvases.length}</strong></p>`;
        output += `<p>占位符是否可见: <strong>${placeholderVisible ? '是' : '否'}</strong></p>`;
        
        if (visibleVideos.length > 0) {
            output += `<p style="color: orange;">⚠️ 警告：有可见的视频元素，这可能导致重复显示</p>`;
        }
        
        if (visibleCanvases.length > 1) {
            output += `<p style="color: orange;">⚠️ 警告：有多个可见的Canvas元素</p>`;
        }
        
        if (visibleVideos.length > 0 && visibleCanvases.length > 0) {
            output += `<p style="color: red;">❌ 错误：同时有可见的视频和Canvas元素，这会导致重复显示</p>`;
        }
        
        output += `<hr>`;
        output += `<h5>详细元素信息:</h5>`;
        
        videos.each(function(index) {
            const video = $(this);
            const isVisible = video.is(':visible');
            const displayStyle = video.css('display');
            output += `<p>Video ${index + 1}: ID="${video.attr('id')}", 显示状态="${displayStyle}", 可见=${isVisible}</p>`;
        });
        
        canvases.each(function(index) {
            const canvas = $(this);
            const isVisible = canvas.is(':visible');
            const displayStyle = canvas.css('display');
            output += `<p>Canvas ${index + 1}: ID="${canvas.attr('id')}", 显示状态="${displayStyle}", 可见=${isVisible}</p>`;
        });
        
        $('#debugOutput').html(output);
        console.log('视频元素检查完成，详情见页面输出');
    });
    
    // 强制重置按钮
    $('#forceResetBtn').click(function() {
        if (typeof forceResetVideoDisplay === 'function') {
            forceResetVideoDisplay();
            $('#debugOutput').html('<p>强制重置已执行，请查看控制台输出</p>');
        } else {
            $('#debugOutput').html('<p>forceResetVideoDisplay函数未定义</p>');
        }
    });
    
    // 强制清理按钮
    $('#forceCleanupBtn').click(function() {
        if (typeof forceCleanupVideoElements === 'function') {
            forceCleanupVideoElements();
            $('#debugOutput').html('<p>强制清理已执行，请查看控制台输出</p>');
        } else {
            $('#debugOutput').html('<p>forceCleanupVideoElements函数未定义</p>');
        }
    });
    
    // 修复重复显示按钮
    $('#fixDuplicateBtn').click(function() {
        if (typeof fixDuplicateDisplay === 'function') {
            fixDuplicateDisplay();
            $('#debugOutput').html('<p>修复重复显示已执行，请查看控制台输出</p>');
        } else {
            $('#debugOutput').html('<p>fixDuplicateDisplay函数未定义</p>');
        }
    });
});
</script>

<style>
.debug-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.debug-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.debug-output {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    min-height: 60px;
}
</style> 